
let create = React.createElement;

/**
 * 
 * 渐变文字
 * @prop from 
 * @prop to
 */
window.ColorText = (props) => {

	from = props.from || '#2744B6';
	to = props.to || '#4AE8F8';

	style = {
		backgroundImage:`-webkit-linear-gradient(-45deg,${from},${to})`, 
		webkitBackgroundClip:"text",
		webkitTextFillColor: "transparent"
	}

    return React.createElement('span', {style: style},
        props.children || ''
    );
}

/** 二级标题
 * @prop align : center left right
 */
 window.SubTitle = (props) => {
	styles = {
		subTitle: {
			color: "#ffa81a",
			fontSize: "18px",
			lineHeight: "1.5",
			fontWeight: "bold",
			margin: "0 0 0",
			textAlign: props.align || 'center'
		}
	}
	
	return create('div', {style: styles.subTitle},  props.children || '这是二级标题');
}

/**
 * 封面页
 * @prop title 主标题
 * @prop vicetitle 副标题
 */
window.CoverFrame = (props) => {
	styles = {
		cover: {
			color: "white",
			width: "100%",
			height: "100%",
			backgroundImage: 'url(./images/cover.jpeg)',
			backgroundSize: '100%'
		},
		titles: {
			position: "absolute",
			top: "100px",
			left: "100px",
			lineHeight: '1',
			title: {
				fontSize: "48px",
				// textShadow: "5px -5px #ffc567, 4px -4px #ffc567",
				fontWeight: "bold"
			},
			viceTitle: {
				fontSize: "24px",
				color: '#4AE8F877',
				marginTop: '12px'
			}
		}
	}
	
	title = props.title || '这是标题'
	viceTitle = props.viceTitle || '这是副标题'
	
	return create(Frame,{},
		create('div', {style: styles.cover},
			create('div', {style: styles.titles},
				create('div', {style: styles.titles.title}, 
					create(ColorText, {}, title)
				),
				create('div', {style: styles.titles.viceTitle}, viceTitle)
			)
		)
	)
}



/**
 * 目标页
 * @prop titles  标题列表
 * @prop viceTitles  英文标题列表
 * @prop current 当前标题索引
 */
window.DirFrame = (props) => {
	styles = {
		dir: {
			backgroundImage: 'url(./images/cover2.jpeg)',
			backgroundSize: '100%',
			width: "100%",
			height: "100%",
		},
		ul: {
			background: 'rgba(0,0,0,.6)',
			width: "100%",
			height: "100%",
		},
		li: {
			position: 'relative',
			paddingLeft: '100px',
			height: '100px',
			lineHeight: '1',
			display: 'flex',
			flexDirection: 'column',
			justifyContent: 'center'
		},
		strong: {
			fontSize: "32px",
    		color: "#fff"
		},
		i: {
			marginTop: "-6px",
			fontSize: "16px",
			fontStyle: "normal",
			fontVariant: "small-caps",
			display: "block",
			color: "rgba(255, 255, 255, 0.5)",
			marginTop: '8px'
		},
		strongHover: {
			fontSize: "32px",
			color: "#ffc567",
			transform: "translate3d(0,-5px,0)"
		},
		iHover: {
			marginTop: "-6px",
			fontSize: "16px",
			fontStyle: "normal",
			fontVariant: "small-caps",
			display: "block",
			color: "#ffc567",
			transform: "translate3d(0,-5px,0)",
			marginTop: '8px'
		},
		img: {
			objectFit: 'fill',
			transform: 'scale(1, 0.35)',
			position: 'absolute',
			left: '25px'
		}

		

	}
	
	titles = props.titles || ['标题1', "标题2", "标题3", "标题4"];
	viceTitles = props.viceTitles || ['TITLE', 'TITLE', 'TITLE', 'TITLE'];
	current = props.current || 0;
	
	return create(Frame,{},
		create('div', {style: styles.dir}, 
			create('ul', {style: styles.ul},
				titles.map((title, index)=>create('li', {style: styles.li},
					index === current ? create('img', {style: styles.img, src: './images/square.svg', width: 50, height: 50}): null,
					create('strong',{style: index === current ? styles.strongHover : styles.strong},title),
					create('i', {style: index === current ? styles.iHover : styles.i}, viceTitles[index] || 'TITLE')
				))
			)
		)
	)
}

/**
 * 
 * @prop title
 * @prop viceTitle
 */
window.ContentFrame = (props) => {
	styles = {
		content: {
			padding: '12px 24px',
			zIndex: '1'
		},
		title: {
			color: "#2b8ac6",
			paddingTop: "5px",
			fontSize: "24px",
			borderTop: "1px solid #b8b8b8",
			display: "inline-block"
		},
		viceTitle: {
			fontSize: "14px",
			fontVariant: "small-caps",
			fontStyle: "normal",
			color: '#2b8ac6'
		},
		logo: {
			position: 'absolute',
			right: "12px",
			bottom: "12px",
			zIndex: '0'
		}
	}

	title = props.title || '这是页面标题'
	viceTitle = props.viceTitle || 'VICE TITLE'

	return create(Frame, {}, 
		create('div', {style: styles.content},
			create('div', {},
				create('div', {style: styles.viceTitle}, viceTitle),
				create('strong', {style: styles.title}, title)
			),
			create('div', {style: styles.logo},
				create('img', {src: './images/logo.png'})
			),
			props.children
		)	
	)
}


/**
 * 致谢页面
 * 
 */
window.ThankFrame = (props) => {
	styles = {
		thank: {
			backgroundImage: 'url(./images/cover3.jpeg)',
			backgroundSize: '100%',
			width: "100%",
			height: "100%",
			display: 'flex',
			alignItems: 'center',
			justifyContent: 'center'
		},
		titles: {
			position: 'relative',
			width: '400px',
			minHeight: '150px',
			fontFamily: '宋体',
			textAlign: 'center',
			lineHeight: '1'
		},
		lt: {
			width: '30px',
			height: '30px',
			borderLeft: '1px solid #363430',
			borderTop: '1px solid #363430',
			position: 'absolute',
			left: 0,
			top: 0
		},
		lb: {
			width: '30px',
			height: '30px',
			borderLeft: '1px solid #363430',
			borderBottom: '1px solid #363430',
			position: 'absolute',
			left: 0,
			bottom: 0
		},
		rt: {
			width: '30px',
			height: '30px',
			borderRight: '1px solid #363430',
			borderTop: '1px solid #363430',
			position: 'absolute',
			right: 0,
			top: 0
		},
		rb: {
			width: '30px',
			height: '30px',
			borderRight: '1px solid #363430',
			borderBottom: '1px solid #363430',
			position: 'absolute',
			right: 0,
			bottom: 0
		},
		title: {
			fontSize: '48px',
		},
		viceTitleParent: {
			textAlign: "justify", 
			textAlignLast: "justify", 
			textJustify: "inter-ideograph",
			padding: '36px 12px 24px'
		},
		viceTitle: {
			color: '#CAB5A1',
			textAlign: 'justify'
		},
		reactdown: {
			position: 'absolute',
			margin: 'auto',
			left: 0,
			right: 0,
			bottom: '12px',
			width: '96px',
			height: '96px',
			borderRadius: '4px'
		}

	}

	title = props.title || '感谢有你';
	viceTitle = props.viceTitle || '温暖了四季';

	var seedrandom = new Math.seedrandom('hello world 1');

	titleElements = title.split('').map((char, index)=>{
		offset = Math.ceil((seedrandom() * 2 - 1) * 25) 
		scale = 1 + ((Math.random() * 2 - 1) * 0.1) 
		return create('span', {key: index, style: {display: 'inline-block', transform:`translateY(${offset}px) scale(${scale}, ${scale})`}},
			create(ColorText, {from: '#95887B', to: '#6C6659'}, char)
		) 
	})

	return create(Frame, {}, 
		create('div', {style: styles.thank},
			create('div', {style: styles.titles},
				create('div', {style: styles.lt}),
				create('div', {style: styles.lb}),
				create('div', {style: styles.rt}),
				create('div', {style: styles.rb}),
				create('div', {style: styles.title}, titleElements),
				create('div', {style: styles.viceTitleParent}, 
					create('div', {style: styles.viceTitle}, viceTitle)
				),
				
			),

			create('img', {style: styles.reactdown, src: './images/reactdown.png'})
		)
	);
}




